<!-- 紫币 -->
<template>
  <view>
    <aster-back font-color="#333" :show-title="true" title="紫币" />
    <view class="coin">
      <view class="header">
        <view class="header__img">
          <image :src="avatar" alt="" />
        </view>
        <view class="header__count">
          <icon class="iconfont icon-taojinbi" type="" />
          <text> {{ coinCount }} </text>
          <view class="header__tag">
            <icon class="iconfont icon-tishi" type="" />
          </view>
        </view>
        <view class="header__btn" @click="to_detail()">
          <button>紫币明细</button>
        </view>
      </view>
      <view class="func">
        <view class="func__item" @click="to_sign()">
          <icon class="iconfont icon-qiandao1" type="" style="color: #ff696b; font-size: 32px" />
          <view class="margin-left-sm">
            <view class="fwb">每日签到</view>
            <view class="fs-xs ft-dark">签到得好礼</view>
          </view>
        </view>
        <view class="func__item" @click="to_lucky()">
          <icon class="iconfont icon-choujiang" type="" style="color: #ffbc49; font-size: 32px" />
          <view class="margin-left-sm">
            <view class="fwb">幸运抽奖</view>
            <view class="fs-xs ft-dark">百分百中奖</view>
          </view>
        </view>
      </view>
      <view class="exchange">
        <aster-sticky :offset-top="0" bg-color="#ffede7" :custom-style="customStyle">
          <view
            :class="active == 1 ? 'exchange__head__active' : 'exchange__head'"
            @click="changeTab(1)"
          >
            超值兑换
          </view>
          <view
            :class="active == 2 ? 'exchange__head__active' : 'exchange__head'"
            @click="changeTab(2)"
          >
            优惠券
          </view>
          <view
            :class="active == 3 ? 'exchange__head__active' : 'exchange__head'"
            @click="changeTab(3)"
          >
            精选好物
          </view>
        </aster-sticky>
        <coin-redeem ref="coinRedeemRef" />
      </view>
    </view>
    <!-- 置顶 -->
    <back-top :scroll-top="scrollTop" />
  </view>
</template>
<script setup lang="ts">
  import AsterBack from '@/components/common/aster-back.vue';
  import AsterSticky from '@/components/common/aster-sticky.vue';
  import CoinRedeem from '@/components/goods/coin-redeem.vue';
  import BackTop from '@/components/common/back-top.vue';
  import { USER_INFO_KEY } from '@/enums/cacheEnum';
  import { getCoinCount } from '@/services/api/user/coin';
  import { UserInfoModel } from '@/services/model/userModel';
  import { getCache } from '@/utils/cache';
  import { isNotEmpty } from '@/utils/is';
  import { onLoad, onReachBottom, onShow, onPageScroll } from '@dcloudio/uni-app';
  import { computed, reactive, ref } from 'vue';
  import { router } from '@/utils/router';
  import config from '@/utils/config';
  import { ResultEnum } from '@/enums/httpEnum';

  const userInfo = ref<UserInfoModel>();
  const coinCount = ref<string>('100');
  const active = ref(1);
  const customStyle = reactive({
    display: 'flex',
    justifyContent: 'flex-start',
    flexDirection: 'row',
  });

  onLoad(() => {
    userInfo.value = getCache(USER_INFO_KEY);
  });

  onShow(() => {
    getMyCoin();
  });

  const getMyCoin = () => {
    getCoinCount().then(({ data }) => {
      if (data.code == ResultEnum.SUCCESS) coinCount.value = data.data;
    });
  };

  const avatar = computed(() => {
    return userInfo.value?.avatar && isNotEmpty(userInfo.value?.avatar)
      ? userInfo.value.avatar
      : '@/static/images/head.png';
  });

  const changeTab = (index: number) => {
    active.value = index;
  };

  const to_detail = () => {
    router.push(config.route.coin_list);
  };
  const to_sign = () => {
    router.push(config.route.coin_sign);
  };
  const to_lucky = () => {
    router.push(config.route.coin_lucky);
  };

  const coinRedeemRef = ref();

  // 页面滚动到底部的事件
  onReachBottom(() => {
    coinRedeemRef.value.loadData();
  });

  /** 置顶 */
  const scrollTop = ref();

  onPageScroll((e: any) => {
    scrollTop.value = e.scrollTop;
  });
</script>
<style lang="scss" scoped>
  .coin {
    .header {
      background-color: #edbe95;
      margin: 10rpx 0;

      &__img {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10rpx;

        image {
          width: 40px;
          height: 40px;
        }
      }

      &__count {
        display: flex;
        justify-content: center;
        align-items: center;

        font-size: 40rpx;
        font-weight: bold;
        color: #bc770a;

        icon {
          font-size: 44rpx;
          color: #8a2be2;
          padding: 6rpx 10rpx;
        }
      }

      &__tag {
        padding: 6rpx;

        icon {
          font-size: 24rpx;
          color: #e5e5e5;
          top: -12rpx;
          position: relative;
        }
      }

      &__btn {
        display: flex;
        justify-content: center;
        align-items: center;

        button {
          padding: 10rpx 40rpx;
          color: #e5e5e5;
          background-color: #eda24d;
          font-size: 28rpx;
          line-height: normal;
        }
      }
    }
  }

  .func {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    color: #333;
    font-size: 32rpx;

    &__item {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 30rpx 64rpx;
      margin: 10rpx 10rpx;
      border-radius: 20rpx;
      background-color: #fff;
    }
  }

  .exchange {
    background-color: #ffede7;
    border-radius: 20rpx;
    margin: 10rpx 0;
    padding: 20rpx;

    &__head {
      font-size: 28rpx;
      padding: 20rpx 20rpx 20rpx 0;
      color: #ff5500;
    }

    &__head__active {
      font-size: 36rpx;
      font-weight: bold;
      color: #ff5500;
      padding: 20rpx 20rpx 20rpx 0;
    }
  }
</style>
